<template>
    <div class="bg-white p-[20px]">
        <div class="mb-[20px]">
                <span class="text-[16px]">系统图标</span>
            </div>
        <div class="flex flex-wrap content-start h-[500px] overflow-y-auto" v-if="iconListData.length > 0">
            <div v-for="(item, index) in iconListData" :key="index" class="mb-[10px]">
                <div
                    class="w-[60px] h-[60px] rounded-[4px] m-[3px] bg-[#f2f6fc] flex items-center justify-center cursor-pointer hover:(bg-[#000000] bg-opacity-60)">
                    <span class="!text-[24px] iconfont" :class="['icon-' + item.font_class]"></span>
                </div>
                <div
                    class="w-[60px] text-xs text-[#333333] overflow-hidden overflow-ellipsis whitespace-nowrap text-center">
                    {{ item.font_class }}</div>
            </div>
        </div>
        <div v-else class="pt-[100px]">
            <a-empty />
        </div>
    </div>
</template>
<script lang="ts" setup>
import iconList from '@/assets/iconfont/iconfont.json';
const iconListData = iconList.glyphs ? iconList.glyphs : [];
</script>